<template>
	<view class="index">
		<!-- 顶部搜索框 -->
		<nav-bar class="i_top" isBack title="一键报价">
		</nav-bar>
		<view class="t_title" style="">
			<view class="t_View" style="">
				<view class="t_onePirce" style="">一键报价</view>
				<view>轻松获取</view>
				<view>我家透明装修花费</view>
			</view>
			<view class="t_image" style="">
				<image src="https://cos.ryz1620.com/liankun/static/offer/offer_look.png"></image>
			</view>
		</view>
		<!-- 内容 -->
		<view class="View_data" style="">
			<!-- 标题 -->
			<view class="Page_t" style="">
				<text class="tit_One" style="">房屋信息</text>
				<text class="tit_Two" style="">*新房=毛坯房，无需拆除费用</text>
			</view>
			<!-- 单选框 -->
			<view class="radioView">
				<u-radio-group v-model="radioValue" @change="radioGroupChange">
					<view class="radioView_view" style="">
						<view class="weui-cell" v-for="(item, index) in list" :key="index" style="">
							<u-radio @change="radioChange" :name="item.name" :disabled="item.disabled">
								<view class="R_text" style="">{{item.name}}</view>
							</u-radio>
						</view>
					</view>
				</u-radio-group>
			</view>
			<!-- 面积 -->
			<view class="M_view" style="margin: 40rpx 0;">
				<view class="M_item" style="">
					<input placeholder="请输入面积" type="number" maxlength="10" :value="InputValue" @input="bindKeyInput"
						placeholder-style="color:#939393;font-size:32rpx;" style="" />
					<view>m²</view>
				</view>
			</view>
			<!-- 户型 -->
			<view class="HouseType">
				<view class="HouseType_title" style="">我家户型</view>
				<view class="HouseType_view" style="">
					<view class="HouseType_item" style="">
						<view class="HouseType_value" style="">{{roomValue}} <text style="">室</text></view>
						<u-number-box :min="0" v-model="roomValue"></u-number-box>
					</view>
					<view class="HouseType_item" style="">
						<view class="HouseType_value" style="">{{officeValue}} <text style="">厅</text></view>
						<u-number-box :min="0" v-model="officeValue"></u-number-box>
					</view>
					<view class="HouseType_item" style="">
						<view class="HouseType_value" style="">{{kitchenValue}} <text style="">厨</text></view>
						<u-number-box :min="0" v-model="kitchenValue"></u-number-box>
					</view>
					<view class="HouseType_item" style="">
						<view class="HouseType_value" style="">{{toiletValue}} <text style="">卫</text></view>
						<u-number-box :min="0" v-model="toiletValue"></u-number-box>
					</view>
				</view>
			</view>
			<!-- tips@change="checkboxChange"  -->
			<view style="margin-top: 20rpx;">
				<u-checkbox v-model="checkedTips" shape="circle">
					<view style="font-size: 24rpx;font-weight: 400;line-height: 34rpx;color: #333333;">允许我们致电为您解读报价
					</view>
				</u-checkbox>
			</view>
			<!-- 报价按钮 -->
			<view class="UpPirceBtn" @click="pushPirceOrder">
				为我报价
			</view>
		</view>
		<!-- icon list -->
		<view class="iconList" style="">
			<view class="iconList_title" style="">将获得这样的报价单</view>
			<view class="iconList_View" style="">
				<view v-for="(item,index) in iconList" :key="index" class="iconList_item" style="">
					<view class="iconList_image" style="">
						<image :src="item.image"></image>
					</view>
					<view>
						<view class="main_title" style="">{{item.title}}</view>
						<view class="main_des" style="">{{item.des}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from "@/components/navBar/navBar"
	import service_offer from '@/service/offer.js'

	export default {
		data() {
			return {
				list: [{
						name: '新房',
					},
					{
						name: '老房',
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radioValue: '', //房屋信息
				InputValue: '', //面积
				roomValue: 0, //室
				officeValue: 0, //厅
				kitchenValue: 0, //厨
				toiletValue: 0, //卫
				checkedTips: true, //协议
				iconList: [{
						image: 'https://cos.ryz1620.com/liankun/static/offer/offer_pirce.png',
						title: '总价预估',
						des: '基于联坤真实用户大数据专业计算'
					},
					{
						image: 'https://cos.ryz1620.com/liankun/static/offer/offer_spend.png',
						title: '联坤花费',
						des: '在联坤花费明细一一列举透明展示'
					},
					{
						image: 'https://cos.ryz1620.com/liankun/static/offer/offer_buy.png',
						title: '业主自购',
						des: '提前预估家居、家电、软装花费'
					},
				],

			}
		},

		computed: {

		},

		components: {
			navBar
		},

		onLoad() {
           this.$utils.getUrl()
		},
		mounted() {},
		methods: {

			pushPirceOrder() {
				var that = this
				let params = {
					userid: uni.getStorageSync('userId'), //用户ID
					room_type: that.radioValue, //int	房屋类型
					area: that.InputValue, //int	面积
					bedroom_num: that.roomValue, //int	卧室数
					parlour_num: that.officeValue, //int	客厅数
					toilet_num: that.toiletValue, //int	卫生间数
					kitchen_num: that.kitchenValue, //int	厨房台数
				}
				if (!that.radioValue) {
					uni.showModal({
						title: '提示',
						content: '请选择房屋信息',
						showCancel: false,
						success(res) {
							if (res.confirm) {}
						}
					})
					return
				}
				if (!that.InputValue) {
					uni.showModal({
						title: '提示',
						content: '请填写面积',
						showCancel: false,
						success(res) {
							if (res.confirm) {}
						}
					})
					return
				}

				if (that.checkedTips) {
					// console.log(params);
					uni.showLoading({
						title: '正在提交...',
					})
					service_offer.PushOffer(params)
						.then(res => {
							if (res.code == 1) {
								setTimeout(function() {
									uni.hideLoading()
									uni.showModal({
										title: '成功',
										content: '已提交成功',
										showCancel: false,
										success(res) {
											that.radioValue = ''
											that.InputValue = ''
											that.roomValue = 0
											that.officeValue = 0
											that.toiletValue = 0
											that.kitchenValue = 0
										}
									})
								}, 1000)
							} else {

							}
						})
				} else {
					uni.showModal({
						title: '提示',
						content: '请勾选允许我们致电为您解读报价',
						showCancel: false,
						success(res) {
							if (res.confirm) {}
						}
					})
				}

			},
			//判断正则是否输入的是数字
			validateNumber(val) {
				return val.replace(/\D/g, '')
			},
			// 输入框的
			bindKeyInput(e) {
				// console.log(e);
				var that = this;
				let value = that.validateNumber(e.detail.value)
				// console.log(value);
				this.InputValue = value
				return value;
			},
			// valChange(e) {
			// 	console.log('当前值为: ' + e.value)
			// },
			// roomValueChange
			// officeValueChange
			// kitchenValueChange
			// toiletValueChange
			// 单选框单个点击
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log( this.radioValue);
				// this.radioValue = e
			},
		}
	}
</script>

<style lang="scss">
	// @import  '../../iconfont.css';
	page {
		background: #FCFCFC !important;
	}

	.HouseType {
		.u-numberbox {
			.u-icon-minus {
				margin-right: 20rpx;
				background: #FFFFFF !important;
			}

			.u-icon-plus {
				background: #FFFFFF !important;
			}

			input {
				display: none !important;
			}
		}

		.HouseType_title {
			font-size: 32rpx;
			font-weight: 400;
			line-height: 44rpx;
			color: #333333;
			margin-bottom: 20rpx;
		}

		.HouseType_view {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;

			.HouseType_item {
				width: 282rpx;
				background: #ECEFF2;
				border-radius: 4rpx;
				padding: 28rpx 18rpx 20rpx 24rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.HouseType_value {
					color: #333333;
					font-size: 32rpx;

					text {
						margin-left: 20rpx;
						color: #939393;
					}
				}
			}
		}
	}

	.t_title {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		margin-bottom: 13rpx;

		.t_View {
			margin-bottom: 15rpx;
			margin-right: 127rpx;
			font-size: 32rpx;
			font-weight: 400;
			line-height: 44rpx;
			color: #333333;

			.t_onePirce {
				font-size: 44rpx;
				font-weight: 600;
				line-height: 60rpx;
				color: #333333;
				margin-bottom: 10rpx;
			}
		}

		.t_image {
			width: 127rpx;
			height: 211rpx;
		}
	}

	.View_data {
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
		box-sizing: border-box;
		margin: 0 32rpx;
		padding: 20rpx 46rpx 40rpx 46rpx;
	}

	.Page_t {
		margin-bottom: 40rpx;

		.tit_One {
			font-size: 36rpx;
			font-weight: 600;
			line-height: 50rpx;
			color: #333333;
			margin-right: 20rpx;
		}

		.tit_Two {
			font-size: 24rpx;
			font-weight: 400;
			line-height: 34rpx;
			color: #C7C7C7;
		}
	}

	.radioView {
		.radioView_view {
			display: flex;
			align-items: center;

			.weui-cell {
				display: flex;
				align-items: center;
				border: 2rpx solid #D5D5D5;
				padding: 16rpx 24rpx;
				width: max-content;
				margin-right: 68rpx;
				border-radius: 8rpx;

				.R_text {
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;
				}
			}
		}
	}

	.M_view {
		.M_item {
			width: 282rpx;
			height: 84rpx;
			background: #ECEFF2;
			border-radius: 4rpx;
			display: flex;
			align-items: center;
			padding: 0rpx 24rpx;
			border-radius: 4rpx;

			input {
				flex: 1;
				font-size: 32rpx;
			}
		}
	}

	.UpPirceBtn {
		flex: 1;
		width: 100%;
		height: 84rpx;
		background: #C3AB7C;
		border-radius: 8rpx;
		margin-top: 32rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.iconList {
		margin: 40rpx 32rpx 0rpx 32rpx;
		padding-bottom: 42rpx;

		.iconList_title {
			margin-bottom: 28rpx;
			font-size: 36rpx;
			font-weight: 600;
			color: #333333;
		}

		.iconList_View {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.iconList_item {
				width: 30%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.iconList_image {
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 20rpx;
				}

				.main_title {
					font-size: 28rpx;
					font-weight: 600;
					line-height: 40rpx;
					color: #333333;
					text-align: center;
					margin-bottom: 8rpx;
				}

				.main_des {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 34rpx;
					color: #C7C7C7;
					text-align: center;
				}
			}
		}
	}
</style>
